<template>
	<view style="background-color: #f1f1f1;height: 250vh;">
		<view class="top">
			<view class="topOne">
			</view>
			<view class="two">
				<view class="two-one">
					<view class="two-oneLeft">负责人 :</view>
					<view class="two-oneRight">{{dataList.SERPSON}}</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">受理时间 :</view>
					<view class="two-oneRight">{{dataList.SERTIME}}</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">整改期限 :</view>
					<view class="two-oneRight">{{dataList.YJXFTIME}}</view>
				</view>
				<view class="two-one">
					<view class="two-oneLeft">整改照片 :</view>
				</view>					
				<!-- <u-album :urls="urls"></u-album> -->
				<view class="photoBox">
					<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="2"
						></u-upload>
				</view>
			</view>
		</view>
		<view class="formBox" style="margin-top: -30px;">
			<u--form :model="form" ref="uForm" :rules="rules">
				<view class="labelBox4">
					<u-form-item label="是否延期:" labelWidth="160rpx" prop="wxms" >	
						<u-switch v-model="form.yanqi" @change="change" activeColor="red" :disabled="dataList.YWXCL!=''"></u-switch>
					</u-form-item>
				</view>
				<view class="labelBox4" v-if="form.yanqi==false">
					<u-form-item label="完成描述:" labelWidth="160rpx" prop="wxms" >	
					</u-form-item>
					<u-input v-model="form.wxms" placeholder="请填写完成描述"/>
				</view>
				<view class="labelBox4" v-if="form.yanqi==true">
					<u-form-item label="延期时间:" labelWidth="160rpx" prop="wxcl" >	
					</u-form-item>
						<view style="margin-top: 5px;margin-right: 0px;">
							<uni-dateformat :date="value1" :threshold="[0,0]" format="yyyy-MM-dd"></uni-dateformat>
							
						</view>
						<view style="margin-top: -8px;margin-right: 0px;">
							<u-button @click="click">编辑</u-button>
						</view>
				</view>
				<view class="labelBox4" v-if="form.yanqi==true">
					<u-form-item label="延期描述:" labelWidth="160rpx" prop="wxcl" >	
					</u-form-item>
					<u-input v-model="form.wxcl" placeholder="请填写延期描述"/>
				</view>
			</u--form>
			<view class="btn">
				<u-button class="btn" type="primary" @click="txwbBtn(form)">填写完毕</u-button>	
			</view>
		</view>
					<u-datetime-picker
								:show="show1"
								v-model="value1"
								mode="date"
								closeOnClickOverlay
								@confirm="confirm"
								@cancel="cancel"
								@change="change"
								@close="close"
							></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {				
				urls:[],
				form: {
						wxcl: '',
						clfy: '',
						fyfw: '',
						wxms: '',
						yanqi:false,
					},
				rules: {
					wxcl: [
						{
							required: true,
							message: '请输入',
							trigger: ['blur', 'change']
									}
							],
							clfy: [
						{
							required: true,
							message: '请输入',
							trigger: ['blur', 'change']
									}
							],
							fyfw: [
						{
							required: true,
							message: '请输入',
							trigger: ['blur', 'change']
									}
							],wxms: [
						{
							required: true,
							message: '请输入',
							trigger: ['blur', 'change']
									}
							],
						},
						fileList1: [],
						dataList: {},
						dh:'',
						num:'',
						typ:0,
				show1: false,
				value1: Number(new Date()),
				current: 1,
			}
		},
		onLoad(query) {
			// console.log(query,'修好l');
			// 从 query 中获取传递过来的数据，并将其转换为对象
			this.num = query.num || 'YD2KX24080001';
			this.dh = this.num
			    // this.xhlData = JSON.parse(query.dataList || "{}");
			    this.typ = query.typ || 1;
				// var files = this.xhlData.files || []
				// for (var i = 0; i < files.length; i++) {
				// 	this.urls.push(files[i].URL)
				// }
				// console.log(this.xhlData,'修好了数据');
				// this.dh = this.xhlData.YDRNUM
				console.log(this.dh,'填写完毕');
			this.init()
		},
		methods: {
			close() {
				this[`show${this.current}`] = false
			},
			cancel() {
				this[`show${this.current}`] = false
			},
			confirm(e) {
				this[`show${this.current}`] = false
				// this.result(e.value, e.mode)
			},
			change(e) {
				// console.log('change', e)
			},
			click(){
				if(this.value1==''){
					this.value1=Number(new Date())
				}
				this.show1 = true
			},
			async init(){
				let GRP1 = {
						GRP1: [{
							YDRNUM: this.num
						}]
				}
				let res = await this.$api.x3.x3request("WSLISTXDR2",GRP1)
					// 请求成功的处理逻辑
					let resR1 = JSON.parse(res.message)
					this.dataList= resR1.GRP1[0] 
					console.log(this.dataList,'新报修数据');
					this.oneLength= resR1.GRP1.length
					var files = resR1.GRP3
					for (var i = 0; i < files.length; i++) {
						this.urls.push(files[i].URL)
					}
					var dat = this.dataList.REPDAT
					this.dataList.REPDAT = dat.slice(0,4)+'-'+dat.slice(4,6)+'-'+dat.slice(6,8)
					
					this.dataList.files=resR1.GRP3
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log(this.fileList1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://125.64.76.148:8125/KXJDDDApi/file/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								console.log(res)
								resolve(JSON.parse(res.data).data)
							}, 1000)
						}
					});
				})
			},
			async txwbBtn(q) {
				console.log(q,'666677778888');
				let GRP1 = {
						GRP1: [{
							YFLG: "2",//标识
							YDRNUM: this.dh,//单号
					}],
				}
				if(this.form.yanqi==true){
					GRP1.GRP1[0].YWXCL = q.wxcl//延期描述
					GRP1.GRP1[0].YYJDAT = this.parseTime(this.value1)//延期描述
					GRP1.GRP1[0].BUGANA = ''//整改情况
					if(q.wxcl==undefined || q.wxcl==''){
						alert('延期原因必填')
						return
					}
				}else{
					GRP1.GRP1[0].YWXCL = ''//延期描述
					GRP1.GRP1[0].YYJDAT = ''//延期描述
					GRP1.GRP1[0].BUGANA = q.wxms//整改情况
					GRP1.GRP2=[]
					// alert(this.fileList1)
					for (var i = 0; i < this.fileList1.length; i++) {
						GRP1.GRP2.push({URL:this.fileList1[i].url})
					}
					if(this.fileList1.length==0){
						alert('整改图片必传')
						return
					}
					if(q.wxms==undefined || q.wxms==''){
						alert('整改情况必填')
						return
					}
				}
				let res = await this.$api.x3.x3request("WSGENXDR2",GRP1)
					// // 请求成功的处理逻辑
					if(res.status=="error"){
						alert(res.message);
						return false;
					}else{
						let wpdData = JSON.parse(res.message)
						// console.log(wpdData.GRP2,56777);
						if(wpdData.GRP1.WOK==0){
							// 显示创建成功的消息提示
							 uni.showToast({
							   title: '填写成功',
							   icon: 'success',
							   duration: 2000
							});
							this.form=''								
							let that = this
							setTimeout(function() {
								if(that.typ==1){
									uni.redirectTo({url:"/pages/mydzPages/mydzPages"})
								}else{
									uni.redirectTo({url:"/pages/dzzxPages/dzzxPages"})
								}
							}, 2000);
							// 使用 uni.navigateTo 跳转到 my 页面，并传递数据
							 // uni.navigateTo({url:"/pages/zpslPages/zpslPages?wpdData="+JSON.stringify(wpdData)})
						}else{
							uni.showToast({
							   title: '填写失败',
							   icon: 'error',
							   duration: 2000
							});
						}
					}
			},
		},
	}
</script>

<style>
	.two-one{
			/* height: 60rpx; */
			display: flex;
			justify-content: space-between;
		}
	.two-oneLeft{
		width: 150rpx;
		line-height: 68rpx;
		/* color: gray; */
		text-align: left;
	}
.top{
	width: 90%;
	background-color: white;
	position: relative;
	top: 50rpx;
	margin: 0 auto;
}
.topOne{
	height: 50rpx;
	border-bottom: 1px solid #f1f1f1;
}
.two{
	/* height: 300rpx; */
}
.two-one{
	height: 60rpx;
	display: flex;
	justify-content: space-between;
}
.two-oneLeft{
	width: 190rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.two-oneRight{
	width: 350rpx;
	line-height: 68rpx;
	color: gray;
	text-align: center;
}
.formBox{
	width: 90%;
	margin: 0 auto;
	position: relative;
	top:60rpx;
}
.labelBox{
	background-color: white;
	padding-left: 15rpx;
	position: relative;
	top: 40rpx;
	display: flex;
	justify-content: space-between;
}
.labelBox2{
	background-color: white;
	padding-left: 15rpx;
	position: relative;
	top: 70rpx;
	display: flex;
	justify-content: space-between;
}
.labelBox3{
	background-color: white;
	padding-left: 15rpx;
	position: relative;
	top: 100rpx;
	display: flex;
	justify-content: space-between;
}
.labelBox4{
	background-color: white;
	padding-left: 15rpx;
	position: relative;
	top: 130rpx;
	display: flex;
	justify-content: space-between;
}
.djlyBox{
	line-height: 80rpx;
}
.djlyBox-text{
}
.btn{
	width: 200rpx;
	margin-top: 160rpx;
	margin-left:120rpx
}
</style>
